<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>event-correlation-addexpression</title>
<%@ include file="../include/common.jsp"%>
<style type="text/css">
	.colorTable{font-size: 12px; color: #000000; line-height: 15px; text-decoration: none;border: 0px solid #97A5CC;}
	.colorTable th {background: #E1EFFA;color:#172E7B;font-weight: normal;font-size: 12px;text-align: left;empty-cells: show;    border-bottom: none;border-left: none;border-right: 1px solid #CCC;border-top: 1px solid #DDD;padding: 3px 6px 3px 4px}
	.colorTable td, .colorTable tr.{border-bottom: none;border-left: none;border-right: 1px solid #CCC;border-top: 1px solid #DDD;padding: 3px 3px 3px 4px;}
	.colortable table{border:0px;}
	.colortable table td{border:0px;}
</style>
<script type="text/javascript">
function closewin(){
	  getTopWin(window).closejBox("addexpression-event-correlation");
}
function add(){

	var objSelect = document.getElementById("sel2");
	var result = "";
	for(var i = 0; i <objSelect.options.length ; i++){ 
		if(i==0)
			result=objSelect.options[i].value;
		else
			result+="||"+objSelect.options[i].value;
	}
	var pWin = getTopWin(window).currentWin["addexpression-event-correlation"];
	 pWin.addExpressionValue(result);
	 getTopWin(window).closejBox("addexpression-event-correlation");
}
function clear(){
	$("#result").val('');
}
function op(type){
	var tempValue = "";
	var objSelect = document.getElementById("sel1");
	var length = objSelect.options.length - 1;    
	for(var i = 0; i <= length; i++){    
	      if(objSelect[i].selected == true){    
	            if(tempValue=="")
	            {
	            	tempValue = objSelect.options[i].value;	
	            }
	            else
	            {
	            	tempValue += type+objSelect.options[i].value;	
	            }
	      }    
	 } 
	
	if(tempValue!="")
	{
		document.getElementById("result").value = tempValue;
	}
}
function opAdd(){
	var tempValue = document.getElementById("result").value;
	if(tempValue==null || tempValue=='')
		return;
	var objSelect = document.getElementById("sel2");
	var varItem = new Option(tempValue, tempValue);      
    objSelect.options.add(varItem); 
}
function opDel(){
	
	var objSelect = document.getElementById("sel2");
	for(var i = objSelect.options.length-1; i >=0 ; i--){ 
		if(objSelect.options[i].selected == true){
			objSelect.options.remove(i);
		}
	}
}
</script>
</head>

<body>
	<table  class="colortable" width="100%" height="90%" border="0" cellspacing="15"
			cellpadding="0" >
		<tr>
			<th width="20%" style="text-align: center;"><h2 class="title-h2" style="margin-top:0;text-align: center;">事件列表</h2></th>
			<th width="40%" style="text-align: center;"><h2 class="title-h2" style="margin-top:0;text-align: center;">操作</h2></th>
			<th width="40%" style="text-align: center;"><h2 class="title-h2" style="margin-top:0;text-align: center;">合成结果</h2></th>
		</tr>
		<tr>
			<td valign="top" style="border: none;">
				<select name="sel1" size="10" multiple id="sel1" style="width: 159px; height: 270px;border-style:solid; border-width:1px; border-color:#cccccc;">
					<c:forEach items="${sNumList}" var="sNum">
						<option value=${sNum} >${sNum}</option>
					</c:forEach>
				</select>
			</td>
			<td valign="top" align="center" style="border-style:solid; border-width:1px; border-color:#cccccc;">
				<br>
					
						<input class="btn-4" type="button" value="并且(&&)" onclick="op('&&');"><br>
				<br>
				<br>
					<label>操作结果</label><br>
					<input readonly type="text" name="result" id="result" size="20" value="" />
				<br>	
				<br>
					<input type="button" class="btn-4" value="添加 >>" onclick="opAdd();"><br><br>
					<input type="button" class="btn-4" value="<<  移除" onclick="opDel();"><br>
					<div align="left" style="height: 90px;padding: 10px;color: blue; align:left;" >
					<span>示例有A、B、C、D事件</span><br>
					<span>1、选中A、B、C事件</span><br>
					<label>2、点击"&&"按钮</label><br>
					<label>3、操作结果A&&B&&C</label><br>
					<label>4、点击添加</label><br>
					<label>5、其它条件组合重复1-4步</label><br>
					<label>6、完成点击提交</label>
				</div>
			</td>
			<td valign="top" style="border-style:solid; border-width:1px; border-color:#cccccc;">
				<select name="sel2" size="4" multiple id="sel2" style="width: 159px; height: 270px;border-style:solid; border-width:1px; border-color:#cccccc;">
						<c:forEach items="${extendConfig}" var="extconf">
						<option value=${extconf} >${extconf}</option>
					</c:forEach>
				</select>
			</td>
		</tr>
	</table>
	<div align="center">
		<input type="button" value="提交" onclick="add();" class="btn-4">
		<input type="button" value="返回" onclick="closewin();" class="btn-4">
	</div>
</body>
</html>
